
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆页面</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css">

    <script src="/static/layui/layui.js"></script>

    <script src="/static/js/jquery.min.js"></script>

    <style>
        #myform{
            width:600px;
            height:800px;
            margin:10px auto;
        }

    </style>


    <script>

        // $(document).ready()
        // 事件监听函数
        // onload 函数
        // 监听页面加载的函数
        // 当页面加载完毕之后执行这个函数里面的代码
        //
        $(document).ready(function () {

            // $("#code").click() 给这个元素对象添加一个鼠标单击事件
            // function () {} 匿名函数
            // 作用是 当 鼠标单击这个元素 的时候， 执行匿名函数里面的代码
            // $("#code") 获取 ID 元素对象
            // 鼠标单击函数
            //
            $("#code").click(function () {
                // $.ajax() 静态方法
                // 方法的参数是一个 json 格式的数据
                $.ajax({
                    type: "POST",
                    url: "/code",
                    data: "",
                    success: function(msg){
                        console.log(msg);
                        $("#code img").attr("src", "/code");
                    }
                });
            });

        });

    </script>

</head>
<body>


<div id="myform">


    <form class="layui-form" action="/login">

        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="code" required lay-verify="required"
                       placeholder = "请输入您的验证码" autocomplete="off" class="layui-input">
            </div>
            <div id="code" class="layui-form-mid layui-word-aux"><img id="code_img" src="/code"></div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn  layui-btn-lg layui-btn-radius" lay-submit lay-filter="formDemo">登录</button>
                <button type="reset" class="layui-btn  layui-btn-lg layui-btn-radius layui-btn-primary">重置</button>

                <button type="button" class="layui-btn  layui-btn-lg layui-btn-radius layui-btn-primary">
                    <a href="/showRegister">注册</a>
                </button>
            </div>
        </div>

    </form>

</div>

</body>
</html>
